<template>
  <div class="page-wrapper">
    <div class="category-wrapper">
      <div class="search-wrapper">
        <van-search
          readonly
          placeholder="请输入搜索的商品"
          @click="toSearch"
        />
      </div>
      <div class="tree-select-category">
        <van-tree-select
          class="tree-select-wrapper"
          :items="items"
          :main-active-index="mainActiveIndex"
          @click-nav="onClickNav"
        >
          <van-pull-refresh
            v-model="refreshing"
            @refresh="refreshSubItems"
            slot="content"
          >
            <template v-if="parentId">
              <van-cell
                v-for="item in subItems"
                :key="item.id"
                :title="item.name"
                is-link
                @click="gotoCateList(item.id)"
              >
                <template v-if="item.has_many_children" slot="label">
                  <category-list
                    :list="item.has_many_children"
                    :parentId="parentId"
                  ></category-list>
                </template>
              </van-cell>
            </template>
            <category-list
              v-else
              :list="subItems"
              :parentId="parentId"
            ></category-list>
          </van-pull-refresh>
        </van-tree-select>
      </div>
    </div>
    <custom-loading :show="isloading"></custom-loading>
  </div>
</template>

<script>
import cateory_new from './category_new_controller';

export default cateory_new;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.page-wrapper {
  height: calc(100vh - 50px - constant(safe-area-inset-bottom));
  height: calc(100vh - 50px - env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;

  .category-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .tree-select-category {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .tree-select-wrapper {
        flex: 1;
        overflow: hidden;

        ::v-deep .van-sidebar, ::v-deep van-tree-select__content {
          overflow-y: auto;
        }

        ::v-deep .van-cell__title {
          text-align: left;
        }
      }
    }
  }
}

</style>